<template>
    <div class="kefu">
        <!-- 顶部 -->
        <div class="top">
            <div class="callback" @click="$router.back()">
                <img src="@/assets/callback.png" alt="">
            </div>
            <div class="top-title">
                Ask questions
            </div>
        </div>
        <!-- main -->
        <div class="kf-main" v-for="item in fankuiList" :key="item.id">
            <!-- y用户消息 -->
            <div class="main-user">
                <div class="main-user-title">
                    <div class="main-userheader">
                        <img src="../assets/userheader.png" alt="">
                    </div>
                    <div class="main-user-desc">User's Nickname</div>
                </div>
                <div class="main-user-content">{{ item.content }}</div>
                <!-- 时间 -->
                <div class="user-time">{{ new Date(item.created).toLocaleString() }}</div>
            </div>
            <!-- 客服消息 -->
            <div class="main-kefu" v-show="item.reply">
                <div class="main-kefu-title">
                    <div class="main-serviceheader">
                        <img src="../assets/kefu.png" alt="">
                    </div>
                    <div class="main-kefu-desc">kefu's Nickname</div>
                </div>
                <div class="main-kefu-content">{{ item.replyContent }}</div>
                <!-- 时间 -->
                <div class="kefu-time">{{ new Date(item.replyTime).toLocaleString() }}</div>
            </div>
        </div>
        <!-- 底部按钮 -->
        <div class="submit" @click="doSubmit">Submit Questions</div>
    </div>
</template>
<script>
import { getfankuiList, getfkListAPI } from "../api";
import { jiami, jiemi } from "../utils/aeskey.js";
export default {
    data() {
        return {
            fankuiList: []
        }
    },
    methods: {
        //获取用户返回类型列表
        async getfkList() {
            const f = { id: '' }
            f.id = this.$store.state.orderId
            const res = await getfankuiList(jiami(f))
            console.log(jiemi(res.data), '反馈类型列表')
        },
        //获取反馈列表
        async getListfk() {
            const f = {
                query: {
                    pageNo: 1,
                    pagesize: 50,
                    thirdOederId: ''
                }
            }
            f.query.thirdOederId = this.$store.state.orderId
            const res = await getfkListAPI(jiami(f))
            console.log(jiemi(res.data), '反馈列表')
            this.fankuiList = jiemi(res.data).page.content
            console.log(this.fankuiList, 'fankuiList')
        },
        //提交反馈
        doSubmit() {
            this.$router.push('/kefuform')
        }
    },
    created() {
        this.getfkList()
        this.getListfk()
    }
}
</script>
<style lang="less" scoped>
@a: 3.75vw;

.kefu {
    width: 100vw;
    background-color: #f5f5f5;
    padding-top: (70/@a);
    padding-bottom: (70/@a);

    .kf-main {
        width: (330/@a);
        margin-left: (22/@a);


        .main-user {
            width: (330/@a);
            background-color: #ffffff;
            padding-top: (18/@a);
            box-sizing: border-box;
            border-radius: (10/@a);
            position: relative;
            margin-bottom: (20/@a);
            padding-bottom: (30/@a);

            .main-user-title {
                margin-left: (11/@a);
                display: flex;

                .main-userheader {
                    width: (25/@a);
                    height: (25/@a);
                    margin-right: (7/@a);

                    img {
                        width: 100%;
                    }
                }

            }

            .main-user-content {
                margin-left: (45/@a);
                margin-top: (5/@a);
                padding-right: (25/@a);
            }

            .user-time {
                position: absolute;
                bottom: (10/@a);
                right: (10/@a);
                font-family: 'Inter';
                font-style: normal;
                font-weight: 400;
                font-size: (12/@a);
                color: #B0B0B0;
            }

        }

        .main-kefu {
            width: (330/@a);
            background-color: #eaeaea;
            padding-top: (12/@a);
            border-radius: (10/@a);
            box-sizing: border-box;
            position: relative;
            padding-bottom: (30/@a);

            .main-kefu-title {
                display: flex;
                margin-left: (11/@a);

                .main-serviceheader {
                    width: (25/@a);
                    height: (25/@a);
                    margin-right: (7/@a);

                    img {
                        width: 100%;
                    }
                }

            }

            .main-kefu-content {
                margin-left: (45/@a);
                margin-top: (5/@a);
                padding-right: (25/@a);
            }

            .kefu-time {
                position: absolute;
                bottom: (10/@a);
                right: (10/@a);
                font-family: 'Inter';
                font-style: normal;
                font-weight: 400;
                font-size: (12/@a);
                color: #B0B0B0;
            }
        }
    }


    .submit {
        width: 100%;
        height: (50/@a);
        background-color: #9f3dff;
        position: fixed;
        bottom: 0;
        left: 0;
        text-align: center;
        line-height: (50/@a);
        font-family: 'Inter';
        font-style: normal;
        font-weight: 700;
        font-size: (18/@a);
        color: #FFFFFF;
    }

    .top {
        height: (56/@a);
        background-color: #fff;
        width: 100vw;
        display: flex;
        justify-content: space-between;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99;

        .callback {
            margin-top: (20/@a);
            margin-left: (15/@a);
            width: (10/@a);

            img {
                width: 100%;
            }
        }

        .top-title {
            margin-top: (17/@a);
            margin-right: (120/@a);
            font-family: 'Inter';
            font-style: normal;
            font-weight: 400;
            font-size: (18/@a);
            color: #202020;
        }
    }
}
</style>